<template>
    <div class="box-card">
      <div class="warn-wrap">
        <div class="title">
          <div class="title-name" :class='{"active":activeTab ==1}' @click='changeTabs(1)'>
            <img src="@/assets/images/workbench/warning.png">
            <span class="name">今日异常设备</span>
            <span class="total-fz">{{abnormalTotal }}</span>
          </div>

          <div class="title-name" :class='{"active":activeTab ==2}' @click='changeTabs(2)'>
            <img src="@/assets/images/workbench/todo.png">
            <span class="name">今日预警设备</span>
            <span class="total-fz">{{warmTotal}}</span>
          </div>
        </div>

        <div v-if='activeTab == 1'>
          <el-table
            ref="Table"
            :data="tableAbnormalData"
            tooltip-effect="dark"
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column label="车间" prop='workshopName'></el-table-column>
            <el-table-column label="产线" prop='lineName'></el-table-column>
            <el-table-column label="设备名称" prop='equipmentName'></el-table-column>
            <el-table-column label="指标名称" prop='indexName'></el-table-column>
            <el-table-column label="当前值" width="110">
              <template slot-scope="{ row }">
                <span v-if='row.indexVal != null && row.indexVal != undefined && row.indexVal !== ""'>
                  <span>{{toFix(row.indexVal, 2)}}</span>
                  <span v-if='row.abnormalUnit && row.abnormalUnit != "无"'>{{row.abnormalUnit}}</span>
                </span>
              </template>
            </el-table-column>

            <el-table-column label="正常区间" width="120">
              <template slot-scope="{ row }">
                <template v-if='(row.abnormalMin == null || row.abnormalMin == undefined || row.abnormalMin === "") && (row.abnormalMax != null && row.abnormalMax != undefined && row.abnormalMax !== "")'>
                  <span>≤{{toFix(row.abnormalMax, 2)}}</span>
                </template>

                <template v-else-if='(row.abnormalMax == null || row.abnormalMax == undefined || row.abnormalMax === "") && (row.abnormalMin != null && row.abnormalMin != undefined && row.abnormalMin !== "")'>
                  <span>≥{{toFix(row.abnormalMin, 2)}}</span>
                </template>

                <template v-else-if='row.abnormalMin != null && row.abnormalMin != undefined && row.abnormalMin !== "" && row.abnormalMax != null && row.abnormalMax != undefined && row.abnormalMax !== ""'>
                  <span>{{toFix(row.abnormalMin, 2)}} ~ {{toFix(row.abnormalMax, 2)}}</span>
                </template>
                <span v-if='row.abnormalUnit && row.abnormalUnit != "无"'>{{row.abnormalUnit}}</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-if='abnormalPager.total > 5'
            :total="abnormalPager.total"
            :page-sizes='[5,10]'
            :page.sync="abnormalPager.pageNum"
            :limit.sync="abnormalPager.pageSize"
            @pagination="getAbnormalEquipmentList"
          />
        </div>

        <div v-if='activeTab == 2'>
          <el-table
            ref="Table"
            :data="tableWarnData"
            tooltip-effect="dark"
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column label="车间" prop='workshopName'></el-table-column>
            <el-table-column label="产线" prop='lineName'></el-table-column>
            <el-table-column label="设备名称" prop='equipmentName'></el-table-column>
            <el-table-column label="指标名称" prop='indexName'></el-table-column>
            <el-table-column label="当前值" width="110">
              <template slot-scope="{ row }">
                <span v-if='row.indexVal != null && row.indexVal != undefined && row.indexVal !== ""'>
                  <span>{{toFix(row.indexVal, 2)}}</span>
                  <span v-if='row.warmUnit && row.warmUnit != "无"'>{{row.warmUnit}}</span>
                </span>
              </template>
            </el-table-column>

            <el-table-column label="预警区间" width="120">
              <template slot-scope="{ row }">
                <template v-if='(row.warmMin == null || row.warmMin == undefined || row.warmMin === "") && row.warmMax != null && row.warmMax != undefined && row.warmMax !== ""'>
                  <span>≤{{toFix(row.warmMax, 2)}}</span>
                </template>

                <template v-if='(row.warmMax == null || row.warmMax == undefined || row.warmMax === "") && row.warmMin != null && row.warmMin != undefined && row.warmMin !== ""'>
                  <span>≥{{toFix(row.warmMin, 2)}}</span>
                </template>

                <template v-if='row.warmMin != null && row.warmMin != undefined && row.warmMin !== "" && row.warmMax != null && row.warmMax != undefined && row.warmMax !== ""'>
                  <span>{{toFix(row.warmMin, 2)}}~{{toFix(row.warmMax, 2)}}</span>
                </template>
                <span v-if='!((row.warmMin == null || row.warmMin == undefined || row.warmMin === "") && (row.warmMax == null || row.warmMax == undefined || row.warmMax === "")) && row.warmUnit && row.warmUnit != "无"'>{{row.warmUnit}}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-if='warnPager.total > 5'
            :page-sizes='[5,10]'
            :total="warnPager.total"
            :page.sync="warnPager.pageNum"
            :limit.sync="warnPager.pageSize"
            @pagination="getWarmEquipmentList"
          />
        </div>
      </div>
    </div>
</template>
<script>
  import {getWarmEquipment,getAbnormalEquipment} from "@/api/workbench/index";
  import equipList from "@/views/components/equipList";
  import { mapState,mapActions,mapGetters} from "vuex";
export default {
  props:{
    queryData:{
      type:String,
      default:""
    },
    queryType:{
      type:String,
      default:""
    }
  },
  data() {
    return {
      form:{
        factoryDeptCode:null,
        workshopCode:null,
        workshopId:null,
        lineId:null,
        equipCode:null,
        equipName:null
      },
      tableAbnormalData:[],
      tableWarnData:[],
      loading: false,
      queryParams:"",
      warnPager: {
        total: 0,
        pageNum: 1,
        pageSize: 5
      },
      abnormalPager: {
        total: 0,
        pageNum: 1,
        pageSize: 5
      },
      abnormalTotal:0,
      warmTotal:0,
      activeTab:"1",
      refreshTimer:null
    };
  },

  computed: {
    ...mapGetters([
      'treePermitList',
      'name'
    ]),
  },

  methods:{
    setRefreshTimer(){
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }
      this.refreshTimer = setTimeout(() => {
        this.getWarmEquipmentList()
        this.getAbnormalEquipmentList()
        this.setRefreshTimer();
      },60000)
    },

    getWarmEquipmentList(){
      this.loading = true;
      const { pageNum, pageSize } = this.warnPager;
      let query = {}
      if(this.queryType == "line"){
        query.erpProductionLineCodes = this.queryParams.split(",");
      }
      else if(this.queryType == "station"){
        query.workStationId = this.queryParams;
      }
      const parmas = {
        query:{
          ...query
        },
        pageNum,
        pageSize,
      }
      getWarmEquipment(parmas)
      .then((res) => {
        this.tableWarnData = res?.data?.warmPage?.records || [];
        this.warnPager.total = res?.data?.warmPage?.total || 0;
        this.warmTotal = res?.data?.warmTotal || 0;
        this.loading = false;
      })
      .catch(() => {
        this.tableWarnData = [];
        this.warnPager.total = 0;
        this.warmTotal = 0;
        this.loading = false;
      });
    },

    getAbnormalEquipmentList(){
      this.loading = true;
      const { pageNum, pageSize } = this.abnormalPager;
      let query = {}
      if(this.queryType == "line"){
        query.erpProductionLineCodes = this.queryParams.split(",");
      }
      else if(this.queryType == "station"){
        query.workStationId = this.queryParams;
      }
      const parmas = {
        query:{
          ...query
        },
        pageNum,
        pageSize,
      }
      getAbnormalEquipment(parmas)
      .then((res) => {
        this.tableAbnormalData = res?.data?.abnormalPage?.records || [];
        this.abnormalPager.total = res?.data?.abnormalPage?.total || 0;
        this.abnormalTotal = res?.data?.abnormalTotal || 0;
        this.loading = false;
      })
      .catch(() => {
        this.tableAbnormalData = [];
        this.abnormalPager.total = 0;
        this.abnormalTotal = 0;
        this.loading = false;
      });
    },

    changeTabs(type){
      this.loading = true;
      this.abnormalPager.pageNum = 1;
      this.warnPager.pageNum = 1;
      this.activeTab = type;
      if(this.activeTab == 1){
        this.getAbnormalEquipmentList()
      }
      else if(this.activeTab == 2){
        this.getWarmEquipmentList()
      }
      // 清除轮询
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }
      this.setRefreshTimer()
      this.loading = false;
    }
  },

  watch:{
    queryData:{
      handler(newVal){
        if(newVal){
          this.queryParams = newVal;
        }
        this.getWarmEquipmentList()
        this.getAbnormalEquipmentList()
        // 清除轮询
        if (this.refreshTimer) {
          clearTimeout(this.refreshTimer);
        }
        this.setRefreshTimer()
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  },
  destroyed(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  }
};
</script>
<style lang="scss" scoped>
.box-card{
  width: 100%;
  .clearfix{
    display:flex;
    // justify-content: space-between;
    align-items: center;
    color: #F59A23;
    .block-title{
      margin-bottom: 0;
    }
    ::v-deep.el-tabs{
      display: flex;
      align-items: center;
      margin-left:30px;
      .item {
        margin-right:30px;
        .el-link--inner{
          display: flex;
          align-items: flex-end;
          img{
            width: 18px;
            height: 18px;
          }
          .name{
            padding:0 6px
          }
        }
      }
      .el-tabs__content{
        margin: 0 0 0.9375rem;
      }
    }
    .date{
      text-align: right;
      flex: 1;
      span{
        color: #34855B;
        font-size: 14px;
        margin-right: 20px;
      }
    }
  }
  .warn-wrap{
    .title{
      display:flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1F2E4D;
      margin-bottom:14px;
      .title-name{
        display:flex;
        align-items: center;
        margin: 0;
        margin-right:30px;
        padding-bottom:10px;
        cursor: pointer;
        img{
          width: 18px;
          height: 18px;
          margin-right:6px;
        }
        .total-fz{
          font-size:16px;
          line-height: 16px;
          margin-left:4px;
        }
      }
      .active{
        border-bottom: 2px solid #34855C;
        color:#34855B
      }
    }
  }
}

</style>
